<template>
  <!-- 添加 .stop 修饰符确保点击事件传递到父组件 -->
  <el-card class="article-card" shadow="hover" @click.stop="$emit('click')">
    <div class="article-header">
      <h2 class="article-title">{{ article.title }}</h2>
      <div class="article-meta">
        <el-avatar :size="24" :src="avatarUrl"></el-avatar>
        <span class="author">{{ article.author?.username || '匿名用户' }}</span>
        <span class="date">{{ formatDate(article.createdAt) }}</span>
      </div>
    </div>
    <div class="article-content">
      <p class="article-excerpt">{{ getExcerpt(article.content) }}</p>
    </div>
    <div class="article-footer">
      <div class="article-tags" v-if="article.tags && article.tags.length">
        <el-tag
          v-for="tag in article.tags"
          :key="tag"
          size="small"
          effect="plain"
          class="tag"
        >
          {{ tag }}
        </el-tag>
      </div>
      <div class="article-stats">
        <el-icon><View /></el-icon>
        <span>{{ article.views || 0 }}</span>
        <el-icon><ChatLineRound /></el-icon>
        <span>{{ article.comments?.length || 0 }}</span>
        <el-icon><Star /></el-icon>
        <span>❤️ {{ article.likes?.length || 0 }}</span>
      </div>
    </div>
  </el-card>
</template>

<script>
import { View, ChatLineRound, Star } from '@element-plus/icons-vue'
import { computed } from 'vue'

export default {
  name: 'ArticleCard',
  components: {
    View,
    ChatLineRound,
    Star
  },
  props: {
    article: {
      type: Object,
      required: true,
      default: () => ({
        title: '',
        content: '',
        author: { username: '匿名用户' },
        createdAt: new Date(),
        views: 0,
        comments: [],
        likes: 0
      })
    }
  },
  setup(props) {
    const avatarUrl = computed(() => {
      const username = props.article.author?.username || '匿名用户'
      return `https://ui-avatars.com/api/?name=${encodeURIComponent(username)}&background=random`
    })

    const formatDate = (date) => {
      if (!date) return '未知时间'
      return new Date(date).toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
      })
    }

    const getExcerpt = (content) => {
      if (!content) return '暂无内容'
      return content.length > 200 ? content.substring(0, 200) + '...' : content
    }

    return {
      avatarUrl,
      formatDate,
      getExcerpt
    }
  }
}
</script>

<style scoped>
.article-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: transform 0.2s;
}

.article-card:hover {
  transform: translateY(-2px);
}

.article-header {
  margin-bottom: 15px;
}

.article-title {
  margin: 0 0 10px;
  font-size: 1.5em;
  color: #303133;
  line-height: 1.4;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #909399;
  font-size: 0.9em;
}

.article-content {
  margin-bottom: 15px;
}

.article-excerpt {
  color: #606266;
  line-height: 1.6;
  margin: 0;
}

.article-footer {
  display: flex;
  justify-content: space-between;  /* 改为右对齐 */
  align-items: center;
  margin-top: 15px;
  gap: 20px;  /* 增加标签与统计之间的间距 */
}

.article-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  /* 添加右对齐时的最小宽度（可选） */
  min-width: 120px;
}

.article-tags .tag {
  font-size: 12px;
}

.article-stats {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #909399;
}

.article-stats .el-icon {
  margin-right: 4px;
}

.author {
  font-weight: 500;
  color: #606266;
}

.date {
  color: #909399;
}
</style>